{% extends "base.html" %}
{% block title %} {{ book.0 }} {% endblock %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{root}}assets/semantic/components/container.min.css">
    <link rel="stylesheet" href="{{root}}assets/semantic/components/grid.min.css">
    <link rel="stylesheet" href="{{root}}assets/semantic/components/list.min.css">
{% endblock %}

{% block main %}
<div id="detail" class="ui stackable two column grid">
    <div class="zuo column">
        <div class="cover" style="background-image: url('{{root}}images/{{ image.src }}');">
            <div class="intro">
                <div class="inner">
                来自: {% if image.link %}<a href="{{image.link}}" target="blank">{{ image.author }}</a>{% else %}{{ image.author }}{% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="you column">
        <div class="poetry">
            <div class="inner-wrapper">
                <div class="title">
                    {{ book.0 }}
                </div>


                <div class="content meta">
                    <hr class="line" style="margin-left: 0;" align="left"/>
                    {% autoescape false %}
                        <p>{{ book.1 | replace("\n", "<br/>") }}</p>
                    {% endautoescape %}
                    <p><a class="link under" href="{{root}}">主页</a></p>
                </div>


                <div class="ui selection list">
                {% for juan in juans %}
                    <div class="item content">
                        <p><a class="link" href="{{root}}www/list/{{juan}}.html">{{ juan }}</a></p>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footer %}
    {{ super() }}
{% endblock %}
